<template>
    <view class="container">
        <view class="top from">
            <view class="title">结算金额</view>
            <view class="price"><view>￥</view>{{ data.PriceSum }}</view>
            <view class="from-list">
                <view class="label">附件</view>
                <view class="value imgbox">
                    <img-item :data="logoimg" @chooseImage="chooseImage" :num="9" :index="1"></img-item>
                    <text class="tips">支持gif,jpg,jpeg,bmg,png(最多上传9张)</text>
                </view>
            </view>
            <view class="from-list">
                <view class="label">备注</view>
                <view class="value">
                    <input
                        type="text"
                        placeholder="请输入备注"
                        v-model="Remark"
                        placeholder-style="color:#999;font-size:26rpx" />
                </view>
            </view>
        </view>
        <view class="list">
            <view class="title" v-if="data.RelateOrderList">共计{{ data.RelateOrderList.length }}笔采购单</view>
            <view class="flex-between listmain" v-for="(item, index) in data.RelateOrderList" :key="index">
                <view class="flex-between flex-left">
                    <view class="index">{{ index + 1 }}</view>
                    <view>{{ item.OrdNo }}</view>
                </view>
                <view class="strong">{{ item.PriceSum }}元</view>
            </view>
        </view>
        <view class="footer">
            <view class="btn btn-success-hollow" @click="submit">提交</view>
        </view>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { GetToSettlement, CreateSettlementOrder } from "@/pages_supplier/service/api/buyOrder.js"
import imgItem from "@/pages_supplier/components/form/img-item.vue"
export default {
    components: {
        imgItem,
    },
    data() {
        return {
            logoimg: "",
            ids: "",
            data: {},
            requestData: {},
            Remark: "",
        }
    },

    onLoad(e) {
        this.ids = e.ids
        this.requestData = JSON.parse(e.requestData)
        console.log(this.requestData)
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        ...mapMutations(["UP_ACCOUNT_VIEW"]),
        //获取详情
        getDetail() {
            let param = {
                startTime: this.requestData.startTime,
                endTime: this.requestData.endTime,
                searchKey: this.requestData.searchKey,
                state: this.requestData.state,
                createType: -1,
            }
            let path = "?ids=" + this.ids + "&type=0"
            this.isLoading = true
            GetToSettlement(param, path).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.isLoading = false
                }
            })
        },
        chooseImage(index, value) {
            this.logoimg = value
            console.log(this.logoimg)
        },
        submit() {
            this.data.FileUrl = this.logoimg
            this.data.Remark = this.Remark
            let param = {}
            param.settlementOrderList = []
            param.settlementOrderList.push(this.data)
            CreateSettlementOrder(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout((e) => {
                        this.UP_ACCOUNT_VIEW(new Date().getTime())
                        this.easyGoBack()
                    }, 2000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: $app-item-padding $app-item-padding 120rpx $app-item-padding;
}
.top {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 0 24rpx;
    .title {
        font-size: 28rpx;
        color: $color-gray-1;
        padding: 32rpx 24rpx 24rpx 24rpx;
    }
    .price {
        display: flex;
        justify-content: center;
        align-items: baseline;
        font-size: 64rpx;
        color: $color-gray-1;
        font-weight: bold;
        padding-bottom: 40rpx;
        border-bottom: 2rpx solid #ebebeb;
        view {
            font-size: 40rpx;
            color: $color-gray-1;
            font-weight: bold;
            position: relative;
            top: -4rpx;
        }
    }
}
.from {
    margin-bottom: 28rpx;
    .from-list {
        padding: 0 24rpx;
        min-height: 112rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #ffffff;
        // border-bottom: 1rpx solid $uni-border-bottom-color;

        .label {
            width: 150rpx;
            font-size: 30rpx;
            color: $color-gray-1;
        }
        .value {
            flex: 1;
            font-size: 30rpx;
            color: #323232;
        }
        .imgbox {
            margin-top: 32rpx;
            .tips {
                font-size: 20rpx;
                color: #ccc;
                display: block;
                margin: -30rpx 0 32rpx 0;
            }
        }
    }
    .imgcode {
        width: 178rpx;
        height: 66rpx;
    }
}
.list {
    padding: 4rpx 16rpx 32rpx 16rpx;
    .title {
        font-size: 28rpx;
        font-weight: bold;
        color: $color-gray-1;
    }
    .listmain {
        height: 98rpx;
        font-size: 28rpx;
        color: $color-gray-1;
        border-bottom: 2rpx solid #ebebeb;
    }
    .index {
        width: 75rpx;
        font-weight: bold;
    }
    .strong {
        font-size: 32rpx;
        font-weight: bold;
    }
}
.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;

    .btn {
        margin: 16rpx 30rpx 0 30rpx;
    }
}
</style>
